<template>
  <div class="skeleton-content">
    <div
      class="skeleton-line"
      v-for="n in lines"
      :key="n"
      :style="{ width: lineWidths[n - 1] || '100%' }"
    ></div>
  </div>
</template>

<script>
export default {
  name: 'Skeleton',
  props: {
    lines: {
      type: Number,
      default: 3
    },
    lineWidths: {
      type: Array,
      default: () => []
    }
  }
};
</script>

<style lang="less" scoped>
.skeleton-content {
  display: flex;
  flex-direction: column;
}

.skeleton-line {
  height: 16px;
  background-image: linear-gradient(
    270deg,
    rgba(161, 161, 179, 0.08) 0%,
    rgba(161, 161, 179, 0.2) 100%
  );
  background-size: 400% 100%;
  margin-bottom: 8px;
  border-radius: 4px;
  animation: pulse 1.5s infinite ease;
}
@keyframes pulse {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}
</style>
